<template>
<a-modal
  :title='title'
  :width='1200'
  :visible='visible'
  :confirmLoading='confirmLoading'
  @ok='handleOk'
  @cancel='handleCancel'
  cancelText='关闭'>
<!--加载中状态  -->
  <a-spin :spinning='confirmLoading'>
    <a-form :form = 'form' layout='inline'>
      <a-row style='margin-bottom: 10px;'>
        <a-col :span='6'>
          <a-form-item label='项目名称'>
            <a-select class='selectItem' show-search :filter-option="filterOption" v-decorator="['project',{rules:[{required:true,message:'请选择项目'}]}]" @change='initAreaList' @click='projectInit' >
              <a-select-option v-for='item in projectList' :label='item.name' :value='item.id' :key='item.id'>
                <span>{{item.name}}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span='6'>
          <a-form-item label='区域名称'>
            <a-select class='selectItem' show-search :filter-option='filterOption' v-decorator="['area',{rules:[{required:true,message:'请选择区域'}]}]" @change='initBuildList' :options='areaList'></a-select>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row>
        <a-col :span='6'>
          <a-form-item label='楼栋名称'>
            <a-select class='selectItem' show-search :filter-option='filterOption' v-decorator="['build',{}]" @change='initUnitList' :options='buildList'></a-select>
          </a-form-item>
        </a-col>
        <a-col :span='6'>
          <a-form-item label='单元号'>
            <a-select class='selectItem' show-search :fiflter-option='filterOption' v-decorator="['unit',{}]" @change='initFloorList' :options='unitList'></a-select>
          </a-form-item>
        </a-col>
        <a-col :span='6'>
          <a-form-item label='楼层号'>
            <a-select class='selectItem' show-search :fiflter-option='filterOption' v-decorator="['floor',{}]" @change='initHouseList' :options='floorList'></a-select>
          </a-form-item>
        </a-col>
        <a-col :span='6'>
          <a-form-item label='房间号'>
            <a-select class='selectItem' show-search :fiflter-option='filterOption' v-decorator="['house',{}]" :options='houseList'></a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</a-modal>
</template>

<script>
import { getProjectList } from '@api/api'
import { getAction } from '@api/manage'

export default {
  name: 'UserBatchModal',
  data(){
    return{
      title:'',
      visible:false,
      confirmLoading:false,
      form:this.$form.createForm(this),
      projectList: [],
      areaList: [],
      buildList: [],
      unitList: [],
      floorList: [],
      houseList:[],
      regionName: "",
      projectName: "",
      areaName: "",
      buildName: "",
      unitName: "",
      floorName: "",
      houseName: "",
      model: {},
      // way: "",
      url: {
        add: "/device/add",
        edit: "/device/device/edit",
        getAreaInfos: '/area/getAreaList',
        getBuildInfos: '/building/getBuildList',
        getUnitInfos: '/unit/getUnitList',
        getFloorInfos: '/floor/getFloorList',
        addHouse: '/house/addHouse',
        getHousInfos:'/house/getHouseList'
      },
    }
  },
  created() {
    this.projectInit()
  },
  methods:{
    filterOption(input,option){
      let com =option.componentOptions
      let name = String(com.propsData.label)
      if (name.toLowerCase().includes(input.toLowerCase())){
        return true
      }
    },
    projectInit(){
      getProjectList().then((res)=>{
        // this.form.resetFields(['area','build','unit','floor'])
        if (res.success){
          this.projectList = res.result
        }
      })
    },
    initAreaList(e){
      this.projectName = e.label
      let params={
        projectId: e.key
      }
      this.form.resetFields(['area','build','unit','floor'])
      this.getAreaList(params)
    },
    async getAreaList(params){
      this.confirmLoading = true
      await getAction(this.url.getAreaInfos,params).then((res)=>{
        this.areaList=[]
        if (res.success){
          if (res.result!==null){
            res.result.forEach(item=>{
              this.areaList.push({
                value:item.id,
                key:item.id,
                label:item.name
              })
            })
          }

        }
        this.confirmLoading=false
      })
    },
    initBuildList(e){
      this.areaName = e.label
      this.form.resetFields(['build','unit','floor'])
      let params={
        areaId:e.key
      }
      this.getBuildList(params)
    },
    async getBuildList(params){
      this.confirmLoading = true
      await  getAction(this.url.getBuildInfos,params).then((res)=>{
        this.buidList=[{value:'',label:'请选择楼栋'}]
        if (res.success){
          if (res.result!=null){
            res.result.foreach(item=>{
              this.buildList.push({
                value:item.id,
                key:item.id,
                label:item.buildingName
              })
            })
          }
        }
        this.confirmLoading=false
      })

    },
    initUnitList(e){
      this.buildName = e.label
      this.form.resetFields(['unitName','floor'])
      let params={
        buildingId: e.key
      }
      this.getUnitList(params)
    },
    async getUnitList(params) {
      if (params.buildingId!=null){
        this.confirmLoading = true
        await getAction(this.url.getUnitInfos,params).then((res)=>{
          this.unitList = [{value:'',label:'请选择单元'}]
          if (res.success){
            if (res.result!=null){
              res.result.forEach(item=>{
                this.unitList.push({
                  value:item.id,
                  key:item.id,
                  label:item.unitName
                })
              })
            }
          }
          this.confirmLoading=false
        })

      }
    },
    initFloorList(e){
      this.unit = e.label
      this.form.resetFields(['floor'])
      let params={
        unitId:e.key
      }
      this.floorId = ""
      this.getFloorList(params)
    },
    async getFloorList(params){
      if (params.unitId!=null){
        this.confirmLoading = true
        await getAction(this.url.getFloorInfos,params).then((res)=>{
          this.floorList=[{value:"",label:'请选择楼栋'}]
          if(res.success){
            if (res.result!==null){
              res.result.forEach(item=>{
                this.floorList.push({
                  value:item.id,
                  key:item.id,
                  label:item.floorName
                })
              })
            }
          }
          this.confirmLoading = false
        })

      }
    },
    initHouseList(e){
      this.floorName=e.label
      this.form.resetFields(['floor'])
      let params={
        floorId:e.key
      }
      this.getHouseList(params)
    },
    async getHouseList(params){
      this.confirmLoading=true
      await getAction(this.url.getHousInfos,params).then((res)=>{
        this.HouseList = [{value:'',label:'请选择楼栋'}]
        if (res.success){
          if (res.result!==null){
            res.result.forEach(item=>{
              this.houseList.push({
                value:item.id,
                key:item.id,
                label:item.buildingName
              })
            })
          }
        }
        this.confirmLoading=false
      })
    },
    handleOk(){

    },
    handleCancel(){
      this.visible=false
    },
    add(){
      this.visible=true
    },
  }
}
</script>

<style scoped>
  .selectItem{
    width: 150px;
    margin-right: 20px;
  }

</style>